/*
 * @Author: web.王晓冬
 * @Date: 2021-10-10 12:48:34
 * @LastEditors: www.itab.link
 * @LastEditTime: 2024-04-12 10:39:07
 * @Description: file content
*/
<template>
  <div class="itab-home" style="background-color: white">
    <!-- <Header /> -->
    <div>
      <img
        style="height: 80vh"
        class="object-cover w-full"
        src="/images/image0.jpg"
        alt=""
      />
    </div>
    <div class="max-w-[1230px] mx-auto text-sm text-black px-2">
      <div class="relative">
        <img src="/images/image1.jpg" alt="" />
        <div
          class="title-circle absolute w-[260px]"
          style="left: 58%; top: 10px; margin-top: 138px"
        >
          <div class="text-3xl font-bold">企业简介</div>
          <div class="text-gray-300">Company Introduction</div>
          <p>
            深圳市瀚明国际物流有限公司成立于2020年，是一家专业的物流服务供应商，位于广东省深圳市。
          </p>
        </div>
      </div>
      <div class="relative">
        <img src="/images/image2.jpg" alt="" />
        <div
          class="absolute w-[300px] text-sm"
          style="left: 8%; top: 0px; margin-top: 40px"
        >
          <p>
            公司一直致力于为国际客户提供高效、便捷的物流服务，涉及多个国家的海上运输。
          </p>
          <p>一直以来都专注于物流行业，拥有一批专业的技术和管理人员。</p>
          <p class="font-bold" style="font-size: 16px">
            为客户提供专业，高品质的物流服务。
          </p>
        </div>
      </div>
      <div class="relative">
        <div class="flex">
          <img class="w-1/2" src="/images/image5.jpg" alt="" />
          <img class="w-1/2" src="/images/image4.jpg" alt="" />
        </div>

        <div
          class="title-circle absolute"
          style="left: 58%; top: 10px; margin-top: 138px"
        >
          <div class="text-xl font-bold">
            随着全球贸易的不断扩展
            <br />
            经济全球化进展的加快
          </div>
          <p>物流作为贸易的主要组成部分 <br />变得越来越重要</p>

          <div class="text-xl font-bold pt-20">物流作为现代经济的支柱</div>
          <p>既推动了国内市场的发展 <br />也促进了国际间贸易的发展</p>
          <p
            class="opacity-20 pt-20"
            style="font-size: 10px; line-height: 12px"
          >
            With the continuous expansion of global trade.Logistics as a major
            <br />
            component of tradeWith the continuous expansion of global
            <br />
            trade.Logistics as a major component of trade
          </p>
        </div>
        <div style="background-color: #ffd738" class="h-[90px]"></div>
        <div style="background-color: #fff" class="h-[90px]"></div>
      </div>
      <div class="relative flex">
        <div class="w-1/2 inline-block px-10">
          <div style="">
            <img src="/images/image10.jpg" alt="" />
            <div
              class="text-center font-bold"
              style="
                line-height: 48px;
                font-size: 16px;
                border: 1px solid #bfbfbf;
                border-top: none;
              "
            >
              企业文化<span class="opacity-20 font-normal text-xs ml-3"
                >Corporate culture</span
              >
            </div>
          </div>
          <div class="pt-10">
            <div class="w-1/2 inline-block pr-5">
              <img src="/images/image15.jpg" alt="" />
              <div
                class="text-center font-bold"
                style="
                  line-height: 48px;
                  font-size: 16px;
                  border: 1px solid #bfbfbf;
                  border-top: none;
                "
              >
                发展目标<span class="opacity-20 font-normal text-xs ml-3"
                  >Development goals</span
                >
              </div>
            </div>
            <div class="w-1/2 inline-block pl-5">
              <img src="/images/image17.jpg" alt="" />
              <div
                class="text-center font-bold"
                style="
                  line-height: 48px;
                  font-size: 16px;
                  border: 1px solid #bfbfbf;
                  border-top: none;
                "
              >
                经营理念<span class="opacity-20 font-normal text-xs ml-3"
                  >Management idea</span
                >
              </div>
            </div>
          </div>
          <div class="pt-10">
            <div class="w-1/2 inline-block pr-5">
              <img src="/images/image18.jpg" alt="" />
              <div
                class="text-center font-bold"
                style="
                  line-height: 48px;
                  font-size: 16px;
                  border: 1px solid #bfbfbf;
                  border-top: none;
                "
              >
                企业精神<span class="opacity-20 font-normal text-xs ml-3"
                  >Corporate spirit</span
                >
              </div>
            </div>
            <div class="w-1/2 inline-block pl-5">
              <img src="/images/image19.jpg" alt="" />
              <div
                class="text-center font-bold"
                style="
                  line-height: 48px;
                  font-size: 16px;
                  border: 1px solid #bfbfbf;
                  border-top: none;
                "
              >
                人才理念<span class="opacity-20 font-normal text-xs ml-3"
                  >Talent concept</span
                >
              </div>
            </div>
          </div>
          <div class="pt-10">
            <img src="/images/image20.jpg" alt="" />
            <div
              class="text-center font-bold"
              style="
                line-height: 48px;
                font-size: 16px;
                border: 1px solid #bfbfbf;
                border-top: none;
              "
            >
              质量方针<span class="opacity-20 font-normal text-xs ml-3"
                >quality policy
              </span>
            </div>
          </div>
        </div>
        <div class="w-1/2 inline-block relative">
          <img src="/images/image13.jpg" alt="" />
          <div
            class="absolute inset-0 m-auto text-white flex justify-center items-center"
          >
            <div class="text-center">
              <div class="font-bold text-3xl">发展目标</div>
              <div class="">Development goals</div>
              <div class="text-2xl pt-20">团结拼搏<br />做强做大做久</div>
              <div
                style="background: #feda39; margin-top: 220px"
                class="text-black font-bold w-[120px] inline-block"
              >
                HANMING
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h-[120px]"></div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from './common/Header.vue'
import Footer from './common/Footer.vue'
import { nextTick, reactive, ref } from 'vue'


</script>

<style lang="less" scoped>
.title-circle {
  &:before {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    left: -50px;
    top: 12px;
    border: 3px solid #ffd138;
  }
}
</style>